import { Button, notification, Table, Tooltip } from 'antd'
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import axios from 'axios'
import React, { useEffect, useState } from 'react'

export default function Audit() {

  // 存储Table表格组件需要的数据
  const [dataSource, setdataSource] = useState([])

  // 从本地存储中将用户数据解构出来
  const { roleId, region, username } = JSON.parse(localStorage.getItem("token"))

  // 获取Table表格组件需要的数据
  useEffect(() => {
    // 这个对象中存储的是用户的身份
    const roleObj = {
      "1": "superadmin",    // 超级管理员
      "2": "admin",         // 区域管理员
      "3": "editor",        // 区域编辑
    }

    axios.get(`/news?auditState=1&_expand=category`, {
    }).then((res) => {
      // console.log(res.data)
      // 根据roleId去roleObj中获取当前用户的身份
      // 如果当前用户是超级管理员，那么就可以拿取所有数据，反之，就只能拿取对应的数据
      setdataSource(roleObj[roleId] === "superadmin" ? res.data : [
        ...res.data.filter(item => item.author === username),
        ...res.data.filter(item => item.region === region && roleObj[item.roleId] === "editor"),
      ])
    })
  }, [region, roleId, username])

  // 创建表格并设置表头
  const columns = [
    {
      title: '新闻列表',
      dataIndex: 'title',
      render: (title, item) => {
        return <Tooltip title="预览内容">
          <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
        </Tooltip>
      }
    },
    {
      title: '作者',
      dataIndex: 'author',
      key: 'author',
    },
    {
      title: '新闻分类',
      dataIndex: 'category',
      render: (category) => {
        return <div>{category.title}</div>
      }
    },
    {
      title: '操作',
      render: (item) => {
        console.log(item)
        return <div>
          <Button 
            type="primary" 
            shape="circle" 
            size='large' 
            icon={<CheckOutlined />} 
            onClick={() => {
              handleAudit(item)
            }} 
            style={{marginRight:"4px"}}
          />
          <Button 
            type="primary" 
            shape="circle" 
            ghost 
            danger 
            size='large' 
            icon={<CloseOutlined />} 
            onClick={() => {
              handleFail(item)
            }} 
          />
        </div>
      }
    },
  ]

  // 审核通过功能，第一个Button组件的点击事件回调
  const handleAudit = (item) => {
    // 通过filter方法将dataSource将当前点击的Button组件所在的表格项元素删除，再把更新后的dataSource通过setdataSource方法重新赋值给dataSource
    // 只要dataSource更新，那么对应的Table组件也会重新更新
    setdataSource(dataSource.filter(data => data.id !== item.id))

    // 通过请求更新后端的数据
    axios.patch(`/news/${item.id}`, {
      auditState: 2,
      publishState: 1
    }).then(res => {
      // 提示框
      notification.info({
        message: "通知",
        description: "您可以到审核列表中查看您的审核状态",
        placement: "top"
      })
    })
  }

  // 审核未通过功能，第二个Button组件的点击事件回调
  const handleFail = (item) => {
    setdataSource(dataSource.filter(data => data.id !== item.id))

    axios.patch(`/news/${item.id}`, {
      auditState: 3,
      publishState: 0
    }).then(ret => {
      notification.info({
        message: "通知",
        description: "你可以到审核列表中查看您的审核状态",
        placement: "top"
      })
    })
  }

  return (
    <div>
      <Table 
        dataSource={dataSource} 
        columns={columns} 
        pagination={{ pageSize: 6 }} 
        rowKey={item => item.id} 
      />
    </div>
  )
}
